<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>参数设置</title>
  <style>
    body {
      font-family: "微软雅黑", Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
      min-height: 100vh;
      width: 100vw;
      box-sizing: border-box;
    }

    form {
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      margin-top: 40px;
    }

    table {
      border-collapse: collapse;
      margin-bottom: 18px;
      width: 100%;
      background: transparent;
    }

    th,
    td {
      border: none;
      padding: 8px 0;
      text-align: center;
      font-size: 18px;
    }

    th {
      font-weight: bold;
      background: transparent;
    }

    .input-box {
      border: 2px solid #222;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 18px;
      width: 120px;
      background: #fff;
      box-sizing: border-box;
      text-align: center;
    }

    .input-box[readonly] {
      background: #f5f5f5;
      color: #888;
    }

    .unit {
      font-size: 16px;
      text-align: center;
      width: 60px;
    }

    .desc {
      margin: 10px 0 18px 0;
      font-size: 15px;
      color: #333;
      text-align: center;
      width: 100%;
    }

    .big-btn {
      padding: 10px 20px;
      font-size: 18px;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 180px;
      text-align: center;
      margin: 10px auto;
      transition: background 0.2s;
      display: block;
    }

    .big-btn:active {
      background-color: #0056b3;
    }

    input[type="checkbox"] {
      width: 22px;
      height: 22px;
      accent-color: #007bff;
      vertical-align: middle;
    }

    @media (max-width: 600px) {
      form {
        max-width: 98vw;
      }

      .input-box {
        width: 80px;
        font-size: 16px;
      }

      th,
      td {
        font-size: 15px;
      }

      .big-btn {
        width: 98vw;
        min-width: 120px;
        font-size: 16px;
      }
    }
  </style>
  <script>
    // 判断是否为阿拉伯数字（整数或小数）
    function isNumber(val) {
      return /^(\d+)(\.\d+)?$/.test(val.trim());
    }

    // 检测输入时是否为数字，不是就提醒
    function bindInputNumberCheck() {
      for (let i = 1; i <= 3; i++) {
        const input = document.getElementById('update' + i);
        input.addEventListener('input', function () {
          if (input.value.trim() !== '' && !isNumber(input.value)) {
            alert('请输入阿拉伯数字');
            input.value = '';
            input.focus();
          }
        });
      }
    }

    // 复选框点击前校验
    function beforeCheck(idx) {
      const updateInput = document.getElementById('update' + idx);
      const checkbox = document.getElementById('drug' + idx);
      if (!isNumber(updateInput.value)) {
        alert('请先在第' + idx + '行输入有效的阿拉伯数字更新值！');
        checkbox.checked = false;
        updateInput.focus();
        return false;
      }
      return true;
    }

    // 获取当前mmml值并显示
    function fetchCurrentMmml() {
      fetch('/mmmlStatus')
        .then(res => res.json())
        .then(data => {
          if (data && data.mmml) {
            for (let i = 1; i <= 3; i++) {
              document.getElementById('current' + i).value = data.mmml[i - 1];
            }
          }
        });
    }

    // 更新mmml值
    function updateMmml() {
      let updates = [];
      for (let i = 1; i <= 3; i++) {
        const checked = document.getElementById('drug' + i).checked;
        const val = document.getElementById('update' + i).value.trim();
        if (checked && val !== '') {
          updates.push({ index: i - 1, mmml: parseFloat(val) });
        }
      }
      if (updates.length === 0) return;

      fetch('/updateMmml', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ updates })
      })
        .then(res => res.json())
        .then(data => {
          if (data.success) {
            alert('更新成功');
            fetchCurrentMmml();
          } else {
            alert('更新失败');
          }
        })
        .catch(() => alert('网络错误，更新失败'));
    }

    // 绑定复选框点击事件和输入检测
    window.onload = function () {
      bindInputNumberCheck();
      for (let i = 1; i <= 3; i++) {
        const checkbox = document.getElementById('drug' + i);
        checkbox.addEventListener('click', function (e) {
          if (!checkbox.checked) return; // 只在选中时校验
          if (!beforeCheck(i)) {
            e.preventDefault();
            return false;
          }
        });
      }
      // 表单提交校验+发送
      document.getElementById('settingsForm').addEventListener('submit', function (e) {
        let checked = false;
        for (let i = 1; i <= 3; i++) {
          const checkbox = document.getElementById('drug' + i);
          const updateInput = document.getElementById('update' + i);
          // 校验更新值为数字
          if (updateInput.value.trim() !== '' && !isNumber(updateInput.value)) {
            alert('第' + i + '行的更新值请输入阿拉伯数字！');
            updateInput.focus();
            e.preventDefault();
            return false;
          }
          // 校验选中时必须有数字
          if (checkbox.checked) {
            checked = true;
            if (!isNumber(updateInput.value)) {
              alert('请先在第' + i + '行输入有效的阿拉伯数字更新值！');
              updateInput.focus();
              e.preventDefault();
              return false;
            }
          }
        }
        if (!checked) {
          alert('请至少选择一项进行设置！');
          e.preventDefault();
          return false;
        }
        // 校验通过，发送更新
        updateMmml();
        e.preventDefault();
        return false;
      });

      // 页面加载时获取当前mmml
      fetchCurrentMmml();
    }
  </script>
</head>

<body>
  <form id="settingsForm" autocomplete="off" onsubmit="event.preventDefault();">
    <table>
      <tr>
        <th style="width:70px;"></th>
        <th style="width:140px;">更新值</th>
        <th style="width:140px;">当前值</th>
        <th style="width:70px;"></th>
      </tr>
      <tr>
        <td>1号 <input type="checkbox" name="drug1" id="drug1"></td>
        <td><input type="text" name="update1" id="update1" class="input-box" autocomplete="off"></td>
        <td><input type="text" name="current1" id="current1" class="input-box" readonly></td>
        <td class="unit">mm/mL</td>
      </tr>
      <tr>
        <td>2号 <input type="checkbox" name="drug2" id="drug2"></td>
        <td><input type="text" name="update2" id="update2" class="input-box" autocomplete="off"></td>
        <td><input type="text" name="current2" id="current2" class="input-box" readonly></td>
        <td class="unit">mm/mL</td>
      </tr>
      <tr>
        <td>3号 <input type="checkbox" name="drug3" id="drug3"></td>
        <td><input type="text" name="update3" id="update3" class="input-box" autocomplete="off"></td>
        <td><input type="text" name="current3" id="current3" class="input-box" readonly></td>
        <td class="unit">mm/mL</td>
      </tr>
    </table>
    <div class="desc">靠近触摸屏的为1号</div>
    <button type="submit" class="big-btn">更新</button>
    <button type="button" class="big-btn" onclick="window.location.href='/'">返回</button>
  </form>
</body>

</html>